<template>
	<view class="page-box body_box">
		<view class="user-box row-box">
			<view class="header-box">
				<u--image :src="header" shape="circle" width="120rpx" height="120rpx"></u--image>
			</view>
			<view style="margin-left: 20rpx;line-height: 60rpx;">
				<view class="row-box center-box">
					<view style="font-weight: 900;font-size: 42rpx;">{{userInfo.nickName}}</view>
					<view class="row-box center-box user-icon-box">
						<view style="background-color: #fff;width: 42rpx;height: 42rpx;border-radius: 21rpx;" class="center-box">
							<u--image :src="userUrl" width="36rpx" height="36rpx"></u--image>
						</view>
						<view style="margin-left: 10rpx;margin-right: 16rpx;font-size: 26rpx;color: #606266;">
							<span v-if="userInfo.type === 3">店长</span>
							<span v-if="userInfo.type === 4">店员</span>
						</view>
					</view>
				</view>
				<view>{{userInfo.companyName}}</view>
			</view>
		</view>
		
		<view class="order-line">
			<view class="h2-font">今日业绩</view>
			<view class="list-box">
				<view class="item-box" v-for="(item, key) in dataList">
					<view class="title-box">{{item.title}}</view>
					<view class="value-box">{{item.value}}</view>
					<!-- <view class="rate-box">
						<text :style="item.type === 'up'? 'color: #fa3534;':'color: #19be6b;'">{{item.type === 'up' ? '↑':'↓'}}</text>
						<text :style="item.type === 'up'? 'color: #fa3534;':'color: #19be6b;'">{{item.rate}}</text>
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="order-line">
			<view class="h2-font">总业绩</view>
			<view class="list-box">
				<view class="item-box" style="height: 100rpx;" v-for="(item, key) in totalList">
					<view class="title-box">{{item.title}}</view>
					<view class="value-box">{{item.value}}</view>
					
				</view>
			</view>
		</view>
		
		<my-oher></my-oher>
	</view>
</template>

<script>
	import myOher from "@/pages/public/my-other.vue"
	export default {
		components: {myOher},
		data() {
			return {
				userInfo: uni.getStorageSync(this.$constant.ROLE_INFO_KEY),
				header: require("@/static/header.jpg"),
				userUrl: require("@/static/img/user.png"),
				/* 订单步骤 */
				orderList: [
					{
						text: "待发货",
						url: require("@/static/img/order/dsh.png")
					},
					{
						text: "已发货",
						url: require("@/static/img/order/shou-huo.png")
					},
					{
						text: "已退单",
						url: require("@/static/img/order/bh.png")
					},
					{
						text: "未成交",
						url: require("@/static/img/order/yc.png")
					}
				],
				dataList: [
					{title: '询价次数', value: '23', rate: '200%', type: 'up'},
					{title: '成交量', value: '13', rate: '600%', type: 'down'},
					{title: '成交率', value: '38.89%', rate: '600%', type: 'up'},
					{title: '回收金额', value: '1238.00', rate: '600%', type: 'up'}
				],
				totalList: [
					{title: '询价次数', value: '23', rate: '200%', type: 'up'},
					{title: '成交量', value: '13', rate: '600%', type: 'down'},
					{title: '成交率', value: '38.89%', rate: '600%', type: 'up'},
					{title: '回收金额', value: '1238.00', rate: '600%', type: 'up'}
				]
			}
		},
		created() {
			this.getDetial();
		},
		methods: {
			getDetial() {
				this.$request("/appShopApi/order/queryEnterprise", "get").then(res => {
					console.log("当前参数：");
					this.totalList[0].value = res.data.sumInquiryCount;
					this.totalList[1].value = res.data.sumTurnover;
					this.totalList[2].value = res.data.sumTurnoverRate ? res.data.sumTurnoverRate + "%" : '0%';
					this.totalList[3].value = res.data.sumRecycleAmount;
					
					this.dataList[0].value = res.data.statisticsVo.inquiryCount;
					this.dataList[1].value = res.data.statisticsVo.turnover;
					this.dataList[2].value = res.data.statisticsVo.turnoverRate ? res.data.statisticsVo.turnoverRate + "%" : '0%';
					this.dataList[3].value = res.data.statisticsVo.recycleAmount;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		background-image: linear-gradient(to top left, #f2f8fc 30%, #dbf6fe);
		height: 100vh;
	}
	.user-box {
		margin-top: 100rpx;
		margin-left: 20rpx;
	}
	.user-icon-box {
		height: 42rpx;
		border-radius: 21rpx;
		background-image: linear-gradient(#dbf1e1, #71d5a1);
		margin-left: 15rpx;
	}
	.order-line{
		background-color: #fff;
		margin-top: 30rpx;
		padding: 40rpx 30rpx;
		border-radius: 20rpx;
		.item-box {
			width: 25%;
			text-align: center;
			font-size: 24rpx;
		}
	}
	.menus_box{
		width: 25%;
		text-align: center;
		font-size: 26rpx;
		line-height: 58rpx;
		margin-top: 40rpx;
	}
	.other-box {
		background-color: #FFF;
		margin-top: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}
	.list-box {
		margin-top: 20rpx;
		.item-box {
			display: inline-block;
			background-color: #f5fff0;
			border: 1px solid #5ac725;
			border-radius: 10rpx;
			padding: 20rpx;
			width: 16.5%;
			height: auto;
			margin: 0 0 10rpx 10rpx;
			text-align: center;
			.title-box {
				font-size: 24rpx;
				color: #606266;
			}
			.value-box {
				font-size: 28rpx;
				font-weight: 900;
				margin-top: 30rpx;
				color: #19be6b;
			}
			.rate-box {
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>
